<!-- 参考官方文档 -->
<template>
    <view class="">
        <!-- type：类型 -->
        <!-- value：初始内容 -->
        <!-- maxlength：最大输入长度 -->
        <!-- @focus：获取焦点时触发事件 -->
        <!-- @blur：失去焦点时触发事件 -->
        <!-- @confirm：回车触发事件 -->
        <input type="text" value="请输入内容" maxlength="10" @focus="onFocus" @blur="onBlur" @input="onInput"
            @confirm="onConfirm" />
        <!-- placeholder：输入框为空时内容 -->
        <!-- placeholder-style：placeholder样式 -->
        <input type="text" placeholder="请输入内容" placeholder-style="color:rgb(0, 255, 0)" />
        <!-- placeholder-class：placeholder样式类 -->
        <input type="text" placeholder="请输入内容" placeholder-class="input-placeholder" />
        <!-- disabled：禁用 -->
        <input type="text" value="hello" disabled />
    </view>
</template>

<script lang="ts" setup>
    function onFocus() {
        console.log('获取焦点');
    };
    function onBlur() {
        console.log('失去焦点');
    };
    function onInput() {
        console.log('输入内容');
    };
    function onConfirm() {
        console.log('回车');
    };
</script>

<style lang="scss" scoped>
    input {
        margin-top: 10px;
        border: 1px solid $custom-color-green;
    }

    .input-placeholder {
        color: $custom-color-red;
    }
</style>